<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #container{
            margin: 0 auto;
            width: 100%;
        }
        img{
            margin-top: 10px;
            width: 100%;
            height: 200px;
        }
      #head{
         background-color: #3c3f41;
         margin-left: -10px;
          margin-right: -10px;
          height:40px;
          alignment: center;
      }
      #Title{
          position: absolute;
          width: 100%;
          color: white;
          font:18px;
          text-align: center;
          margin-top: 10px;
      }
      #BarRightButn{
          position: absolute;
          margin-top: 8px;
          right: 20px;
          height: 20px;
          width: 20px;
          background-color: url("image/更多.png");
      }
      #buttons {
          position: absolute;
         margin-top: -30px;
          right: 20px;
          width: 60px;
      }
      #buttons span{
          cursor: pointer;
          float: left;
          border: 1px solid #fff;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #333;
          margin-right: 5px;

      }
     #buttons .on{
          background-color: chocolate;
      }

     #section{
         margin: 0 auto;
         width: 100%;
         height: 260px;
         background-color: white;
     }
     #B1{
         position: absolute;
         left: 25px;
         font-size: 14px;
     }
     #B2{
        position: absolute;
        left: 25px;
        margin-top: 30px;
        color: red;
        font-size: 16px;
     }

     #B3{
         position: absolute;
         margin-top: 80px;
         left: -10px;
         width: 100%;;
         height: 3px;
         background-color: #dcdcdc;
     }

     #three {
         position: absolute;
         top: 20px;
         margin-left: 20px;
     }
     #Three img{
         position: absolute;
         margin-top: 50px;
         padding-left: 20px;
         width: 100%;
         height: 160px;
     }

     #fore {
         position: relative;
         top: 20px;
         margin-left: 20px;
     }
      #Fore img{
          position: absolute;
          margin-top: 56px;
          margin-left: -20px;
          height: 160px;
          width: 100%;
      }
    </style>
    <script >
    window.onload=function () {
        var show = true;
        var buttons = document.getElementById('buttons').getElementsByTagName('span');
        function play() {
            buttons[0].className='on'
            buttons[1].className=''
            setInterval(function () {
               if (show) {
                   mouseOver()
               }else {
                   mouseOut()
               }
            }, 2000);
        }

        function mouseOver() {
            document.head.src = "image/img_banner.png"
            show = false
            buttons[1].className='on'
            buttons[0].className=''
        }
        function mouseOut() {
            document.head.src = "image/banner.png"
            show = true
            buttons[0].className='on'
            buttons[1].className=''
        }
        play();

         function ListBtnAction(event) {
            var b = event.target;

            alert("正在开发中");
             if (b.flag==0){
                // window.location.href="Regist.html";
             }
         }

        function  listView(){
           var wight =  (document.body.clientWidth - 80)/3.0;
           var div = document.getElementById('section');
           var titles = ["流量魔盒注册","流量魔盒登录","魔盒资讯","关于我们","玩法介绍","推广赚钱"];
           for (var i = 0;i<6;i++){
               var divse = document.createElement('div');
               divse.flag = i;
               divse.addEventListener("click",ListBtnAction,false);
                divse.style.position="absolute";
                divse.style.height="90px";
                divse.style.margin = "0 auto"
                divse.style.backgroundColor="#3c3f41";
                divse.style.width = wight.toString()+"px"
               var left = "40px";
               switch (i%3){
                   case 0: left = "20px"; break;
                   case 1: left = (20+((wight+20)*(i%3))).toString()+"px"; break;
                   case 2: left = (20+((wight+20)*(i%3))).toString()+"px"; break;
               };
               divse.style.marginTop = "10px";
               if (i>2){
                   divse.style.marginTop = "120px";
               }
               divse.style.marginLeft = left;
               var image = document.createElement('img');
               image.flag=i;
                image.style.position = "absolute";
                image.style.marginLeft = (wight - 40)/2.0+"px";
                image.style.marginTop = "10px";
                image.style.textAlign= "center";
                image.src="image/"+titles[i]+".png";
                image.style.height = "40px";
                image.style.width = "40px";
               divse.appendChild(image);

               var dive = document.createElement("div");
               dive.flag=i;
               dive.style.width = wight+"px";
               dive.style.position = "absolute";
               dive.style.margin = "0 auto";
               dive.style.textAlign = "center"
               dive.style.bottom = "10px";
               dive.style.fontSize="12px"
               dive.style.color="#ffffff"
               divse.appendChild(dive);

               var Titles = document.createTextNode(titles[i]);

               dive.appendChild(Titles);
               div.appendChild(divse);
           }

        }
        listView();

        function TabBarRight() {
            var  divew = null;
           var div = document.getElementById("BarRightButn");
            div.addEventListener("click",function() {
                if (divew == null){
                    divew = document.createElement("div");
                    divew.style.position ="relative"
                    divew.style.width="100%";
                    divew.style.top="-465px";
                    divew.style.height = (document.body.scrollHeight).toString()+"px";
                    divew.style.backgroundColor="#ffffff";
                    document.body.appendChild(divew);
                    var list = document.createElement("table");
                    list.style.width="100%";
                    list.style.height="60px";
                    divew.appendChild(list);

                   var row = list.insertRow(0);
                   row.addEventListener("click",()=>{
                       document.body.removeChild(divew);
                       divew = null;
                   },false);

                   row.style.height="80px";
                   row.style.verticalAlign="middle";
                   row.insertCell(0).innerHTML="<td>" +
                       "首页" +
                        "<div style='background-color: #333333;width: 100%;height: 1px;margin-top: 20px'>"+

                        "</div>"+
                       "</td>";
                    var row1 = list.insertRow(1);
                    row1.addEventListener("click",()=>{
                        window.location.href="About.html"
                    },false);
                    row1.insertCell(0).innerHTML="<td style='margin-top: 10px'>" +
                        "关于我们" +
                        "<div style='background-color: #333333;width: 100%;height: 1px;margin-top: 20px'>"+

                        "</div>"+

                        "</td>";
                } else {
                    document.body.removeChild(divew);
                    divew = null;
                }



            },false);

        }
        TabBarRight();
    }

    </script>
</head>
<body>
    <div id="head">
        <div class="text" id="Title">FlowBox</div>
        <img src="image/更多.png" id="BarRightButn"/>
    </div>

   <div id="container">
       <div class="list" style="left: -400px" >
           <img style="" name="head" src="image/banner.png"/>
       </div>
       <div id="buttons">
           <span indext="1" class="on" style="flex: 1px"></span>
           <span indext="2"></span>
       </div>
   </div>
   <div id="section">

   </div>

    <div>
        <b id="B1">如果帮助添加客服微信号：mh11057</b>
        <b id="B2">交流与交易请添加QQ群：766756930</b>
        <b id="B3"/>
    </div>


    <div id="three">
        <table>
            <tr>
                <b style="font-size: 20px">公司简介</b>
            </tr>
            <tr>
                <img style="position: relative;margin-top: 20px" src="image/banner.png">
            </tr>
            <tr>
                <b style="line-height: 30px">
                    流量魔盒团队为British Communications Technology Co Ltd (英国通信有限公司) 旗下独立的一支专注通讯科技发展研发团队，总部位于苏格兰格拉斯哥，为2010年成立的民营公司，该公司始终是全英最大移动设施硬件的营运者。公司在全球32个国家设有营业点或办事处，2015年全球收约为45亿美元。海外营业处的营业额占改集团总营业额的三分之一。
                </b>
            </tr>
            <tr >
                <br >
                   <b style=" position: absolute;margin-top: 20px;font-size: 20px" >企业文化</b>
                </br>
            </tr>
            <tr>
                <img style="position: relative;margin-top: 50px;" src="image/img_banner.png">
            </tr>

            <tr>
                <br>
                <br>
                   <b style="font-size: 15px;margin-top: 20px">契约精神</b>
                </br>
            </tr>
            <tr>
                <b style="font-size: 13px;margin-top: 25px">我们肩负着对每一个员工负责的使命，如同家庭成员般彼此关爱，相互忠诚</b>
            </tr>

            <tr>
                <br>
                <br>
                   <b style="font-size: 15px;margin-top: 45px" >团队合作</b>
                </br>
            </tr>
            <tr>
                <b style="font-size: 13px;margin-top: 50px">我们强调团队合作精神。我们分享知识，力求让每个人都能与企业共同分享收获成功的喜悦</b>
            </tr>

            <tr>
                <br>
                <br>
                   <b style="font-size: 15px;margin-top: 70px">追求卓越</b>
                </br>
            </tr>
            <tr>
                <b style="font-size: 13px;margin-top: 75px">我们以追求卓越的态度对待所从事的每一件事。乐于奉献，充满热情的员工总是非同凡响</b>
            </tr>

            <tr>
                <br>
                <br>
                <b  style="font-size: 15px;margin-top: 95px">创业精神</b>
                </br>
            </tr>
            <tr >
                <b style="font-size: 13px;margin-top: 100px">和众多的客户一样，我们也是一家创业家精神的投行：富有激情，敢于冒险。自我激励，善于资源</b>
            </tr>
            <tr>
                <br>
                <br>
                  <b style="margin-top: 120px;font-size: 15px;">主人翁精神</b>
                </br>
            </tr>
            <tr style="height: 60px">
                <b style="font-size: 13px;">我们是一家由公司管理层拥有的合伙制投行。管理层坚信应该与员工分享公司的成功。</b>
            </tr>
        </table>

    </div>
</body>
</html>